<template>
  <div class="play-box" v-if="renderData">
    <div class="title">{{ renderData.playTypeName }}</div>
    <div class="play-odds">
      <div v-for="(numItem, index) in getNumOddsList" :key="index" class="row-item">
        <OddsBtn
          @selectOdds="selectNumber(numItem, renderData.playTypeName)"
          :data="{ number: numItem.playName, odds: numItem.maxOdds }"
          :class="{ selected: getSelectNumOddsList.includes(numItem) }"
        />
        <div class="animalNumber">
          <OddsBtnRound
            v-for="(item, idx) in getAnimalNumberList(numItem.playCode)"
            :itemStyle="handleRoundStyle(item, numItem.playCode).itemStyle"
            :numberStyle="handleRoundStyle(item, numItem.playCode).numberStyle"
            :oddsStyle="handleRoundStyle(item, numItem.playCode).oddsStyle"
            :data="{ number: item }"
            :key="idx"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import OddsBtn from './odds-btn.vue'
import OddsBtnRound from './odds-btn-round.vue'
import mixin from '@/mixin/xglhc-mixin.js'
import { handleStyleFromDifferentColorNum } from '@/config/markSixConfig.js'
import { animalList } from '@/config/markSixAnimal.js'

export default {
  name: 'xglhc-tx-game',
  components: {
    OddsBtn,
    OddsBtnRound,
  },
  mixins: [mixin],
  props: {
    renderData: {},
  },
  methods: {
    getAnimalNumberList(playCode) {
      return animalList.find((item) => item.playCode === playCode)?.nums
    },

    // 根据赔率号码类型 处理不同的样式
    handleRoundStyle(number, playCode) {
      const animalCode = Array.from(this.getSelectNumOddsList, ({ playCode }) => playCode)
      let styleStore = handleStyleFromDifferentColorNum(number)
      if (animalCode.includes(playCode)) {
        return styleStore.active
      } else {
        return styleStore.normal
      }
    },
  },
}
</script>

<style scoped lang="less">
@import url('./common.less');
.play-odds {
  .row-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    box-sizing: border-box;
    .animalNumber {
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      padding-left: 3px;
      box-sizing: border-box;

      .odds-item {
        width: 35px;
        height: 35px;
        margin-top: 0;
      }
    }
  }
}
</style>
